<template>
    <view class="content">
		
		<view class="row b-b">
		    <text class="tit">新支付密码:</text>
		    <input class="input" type="password" v-model="password" placeholder="" placeholder-class="placeholder" />
		</view>
        <view class="row b-b">
            <text class="tit">注册手机号:</text>
            <input class="input" type="number" maxlength="11" v-model="phone" placeholder="" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">验证码:</text>
            <input class="input" type="text" v-model="code" placeholder="" placeholder-class="placeholder" />
			<button class="code" @click="getVerificationCode" :disabled="disabled">{{ codeMsg }}</button>
        </view>
        
		
        <button class="add-btn" @click="confirm">确认</button>
    </view>
</template>

<script>
	import md5 from '../../api/md5.js'
    export default {
        data() {
            return {
                    phone: '',
                    code: '',
                    password: '',
                   codeMsg: '获取验证码',
				   disabled:false
            
            }
        },
        onLoad(option) {},
        methods: {
			//验证手机号
			validePhoneNumber() {
				var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
				if (this.phone == null || this.phone == '') {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				} else if (!myreg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
			},
			//验证验证码
			getVerificationCode() {
				var flag = this.validePhoneNumber();
				if (flag != false) {
					let count = 60;
					this.codeMsg = count + 's';
					let timer = setInterval(() => {
						if (count <= 1) {
							clearInterval(timer);
							this.codeMsg = '获取验证码';
							this.disabled = false;
						} else {
							count--;
							this.codeMsg = count + 's';
							//获取验证码
							this.disabled = true;
						}
					}, 1000);
					this.$http.get('/sms/getSmsCode', { phone: this.phone, type: 3 }).then(res => {
						console.log(res);
						if (res.code == '0') {
							uni.showToast({
								title: '验证码已发送',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				}
			},
            //提交
            confirm() {
                
               if (this.password == null || this.password == '') {
                	uni.showToast({
                		title: '新密码不能为空',
                		icon: 'none',
                		duration: 2000
                	});
                	return false;
                }else{
					var flag = this.validePhoneNumber();
					if(flag!=false){
						if (this.code == null || this.code == '') {
						 	uni.showToast({
						 		title: '验证码不能为空',
						 		icon: 'none',
						 		duration: 2000
						 	});
						 	return false;
						 }else{
							 //调接口
							 this.updatePwd();
						 }
					}
                	
                }

            },
			//更改支付密码
			updatePwd(){
				let that = this;
				let Password = md5(this.password)
				that.$http.post('/user/updatePwd', { phone: this.phone, type: 2,password:Password,code:this.code }).then(res => {
					if (res.code == '0') {
						console.log(res.data)
						if (res.data != '') {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
        }
    }
</script>

<style lang="scss">
	
    page {
        padding-top: 16upx;
		background-color: #fff;
    }

    .row {
        display: flex;
        align-items: center;
        position: relative;
        margin: 0 30upx;
        height: 110upx;
        background: #fff;
		border-bottom: 1upx solid rgba(238,238,238,1);
        .tit {
            flex-shrink: 0;
            width: 200upx;
            font-size: 30upx;

        }
		.code {
			width: 140upx;
			height: 48upx;
			background: rgba(253, 88, 10, 1);
			border-radius: 8upx;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 48upx;
			padding: 0;
		}
        .input {
            flex: 1;
            font-size: 30upx;

        }

        .icon-shouhuodizhi {
            font-size: 36upx;

        }
    }

    .add-btn {
        width:600upx;
        height:80upx;
        background:rgba(255,117,23,1);
        border-radius:8upx;
		font-size: 30upx;
		color: #fff;
		text-align: center;
		line-height: 80upx;
		margin-top: 160upx;
    }
</style>
